<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>欢迎光临 Music Store</title>
<link type="text/css" rel="Stylesheet"
	href="/MusicStore/static/style/front.css" />
<script type="text/javascript" src="../static/js/jquery-1.10.2.min.js"></script>
<script src="../static/js/jquery.validate.js"></script>
<script>
	$.ajaxSetup({
		error : function(xhr, status, err) {
			alert("错误！");
			console.log(xhr);
			console.log(status);
			console.log(err);
		},
		dataType : "json"
	});
	$(function() {
		loadGenres();
		$("#genre-list")
				.delegate(
						"button.delete",
						"click",
						function() {
							var id = $(this).attr("data-ref");
							$
									.ajax({
										url : "${pageContext.request.contextPath}/user/genre-list/"
												+ id,
										type : "delete",
										success : function(json) {
											if (json.success) {
												loadGenres();
											} else {
												alert(json.message);
											}
										}
									});
						});

		$("#genre-list")
				.delegate(
						"button.edit",
						"click",
						function() {
							var id = $(this).attr("data-ref");
							$
									.ajax({
										url : "${pageContext.request.contextPath}/user/genre-list/"
												+ id,
										type : "get",
										success : function(json) {
											$("#genreId").val(json.id);
											$("#genreName").val(json.name);
											$("#description").val(
													json.description);
										}
									});
						});

		$("#save").click(function() {
			var data = $("#editForm").serialize();
			$.ajax({
				url : "${pageContext.request.contextPath}/user/genre-list",
				type : "post",
				data : data,
				success : function(json) {
					if (json.success) {
						$("#genreId").val("0");
						$("#genreName").val("");
						$("#description").val("");
						loadGenres();
					} else {
						alert(json.message);
					}
				}
			});
		});
		$("#btnSearch").click(function() {
			$.ajax({
				url : "${pageContext.request.contextPath}/user/genre-list"+name,
				type : "get",
				data : data,
				success : function(json) {
						$("#genre-list").empty();
						json
						.map(function(item, index) {
							var html = "<tr><td>"
									+ item.name
									+ "</td><td> <button class='edit' data-ref='"+item.id+"'>编辑</button> <button class='delete' data-ref='"+item.id+"'>删除</button> </td></tr>";
							$("#genre-list").append(html);
				
						})
				}
			});
			});
		});
	function loadGenres() {
		$
				.ajax({
					url : "${pageContext.request.contextPath}/user/genre-list",
					dataType : "json",
					type : "get",
					success : function(json) {
						$("#genre-list").empty();
						json
								.map(function(item, index) {
									var html = "<tr><td>"
											+ item.name
											+ "</td><td> <button class='edit' data-ref='"+item.id+"'>编辑</button> <button class='delete' data-ref='"+item.id+"'>删除</button> </td></tr>";
									$("#genre-list").append(html);
								});
					}
				});
	}
</script>
</head>

<body>
	<div id="wrapper">
		<div id="header">
			<div id="header-logo">
				<a href="index"><img
					src="/MusicStore/static/style/images/logo.png" alt=""></img></a>
			</div>
			<div class="clearBoth"></div>
			<div id="header-search">
				<form method="get">
					<input id="keyword" name="name" type="text" /><input
						id="btnSearch" type="submit" value="搜索" />
				</form>
			</div>
			<div id="header-nav">
				<ul>

					<li><a href="manage">后台管理</a></li>
					<li><a href="product-list">商品管理</a></li>
					<li><a href="manage">订单管理</a></li>
					<li><a href="manage-genre">分类管理</a></li>
				</ul>
				<label id="welcome">您好，Sam。</label>
			</div>
		</div>
		<div id="content">

			<div id="main">
				<div>
					<div id="hotAlbums">
						<table border="1px">
							<tr>
								<td>分类名称</td>
								<td>详细</td>
							</tr>
							<tbody id="genre-list">
							</tbody>

						</table>
					</div>
					<form id="editForm">
						<input type="hidden" id="genreId" name="id" value="0" /> 分类名称：<input
							id="genreName" name="name" /> 分类详情：<input id="description"
							name="description" />
						<button id="save" type="button">保存</button>
					</form>
				</div>
			</div>
			<div class="clearBoth"></div>
		</div>
		<div id="footer">
			<div id="footer-ad">
				<img src="/MusicStore/static/style/images/footer.png" alt=""></img>
			</div>
			<div id="footer-contactUs">
				<p>Music Store</p>
				<p>Design by Sam Chen, July,2011.</p>
			</div>
		</div>
	</div>
</body>
</html>
